<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="queryForm.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="账单时间">
        <el-date-picker
            v-model="createTimeArray"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button type="primary" @click="handleEcharts">统计</el-button>
                <el-button type="primary" @click="excel">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%"
    >
      <el-table-column
          prop="userName"
          label="姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="ym"
          label="账单月份"
          width="100">
      </el-table-column>
      <el-table-column
          prop="total"
          label="总费用"
          :formatter="formatAmount"
          width="100">
      </el-table-column>
      <el-table-column
          prop="fang"
          label="房租"
          :formatter="formatAmount"
          width="100">
      </el-table-column>
      <el-table-column
          prop="shui"
          label="水费"
          :formatter="formatAmount"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dian"
          label="电费"
          :formatter="formatAmount"
          width="120">
      </el-table-column>
      <el-table-column
          prop="wang"
          label="网费"
          :formatter="formatAmount"
          width="120">
      </el-table-column>
      <el-table-column
          prop="wu"
          label="物业费"
          :formatter="formatAmount"
          width="120">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="size"
        @current-change="changePage"
        :total="total">
    </el-pagination>
    <!-- 费用占比 -->
    <el-dialog title="" :visible.sync="echartsVisible" >
      <VueEcharts :option="orgOptions" style="height: 400px"></VueEcharts>
    </el-dialog>


  </div>
</template>

<script>
import Report from "../api/report";

export default {
  data() {
    return {
      total: 0,
      size: 10,
      current: 1,
      tableData: [],
      queryForm: {},
      createTimeArray: ['', ''],
      multipleSelection: [],
      echartsVisible: false,
      myChartStyle: {width: "500%", height: "500px"},
      orgOptions: {},
      option: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

    }
  },
  created() {
    this.onQuery();
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    formatAmount(row, column, cellValue, index) {
      if (cellValue) {
        return parseFloat(cellValue).toFixed(2)
      } else {
        return '-'
      }
    },
    changePage(page) {
      console.log('page==', page)
      this.current = page
      this.onQuery();
    },
    async onQuery() {
      this.queryForm.current = this.current
      if (this.createTimeArray && this.createTimeArray.length == 2) {
        this.queryForm.startDate = this.createTimeArray[0]
        this.queryForm.endDate = this.createTimeArray[1]
      } else {
        this.queryForm.startDate = ''
        this.queryForm.endDate = ''
      }
      this.queryForm.size = this.size
      let response = await Report.getReportPage(this.queryForm);
      this.tableData = response.records;
      this.total = response.total;
      this.size = response.size;
      this.current = response.current;
    },


    // 点击编辑
    async handleEcharts() {
      this.echartsVisible = true;
      let response = await Report.getEcharts(this.queryForm);
      this.orgOptions = {
        title: {
          text: '租金费用占比',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: response.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },

    async excel() {
      await Report.exportExcel();
      // location.href='http://localhost:8088/getExcel'

    },

  }
}
</script>

<style scoped>

</style>